<template>
  <div class="abcd">
    <div id="target">
      <div class="replay-content-box" id="replayContentBox">
        <div class="mdEditBox">
          <div>
            <div>
              <v-md-editor
                v-model="replyPojo.text"
                left-toolbar = "undo redo | clear h bold italic strikethrough	quote ul ol table	hr link code image tip"
                :disabled-menus="[]"
                @upload-image="handleUploadImage"
                :placeholder = "$t('workDisplay.replay.mdInfo')"
                height="340px"
              >
              </v-md-editor>
            </div>
            <div>
              <a href="javascript:;" :title="$t('workDisplay.replay.publish')">
                <div class="publish-tip" id="publishTip" @click="publishReply">
                  {{$t('workDisplay.replay.publish')}}
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="replay-box">
        <a href="javascript:;" :title="$t('workDisplay.replay.forTaAnswer')">
          <div class="replay-tip" id="replayTip" @click="onclickReplayTip('','null')">
            {{$t('workDisplay.replay.forTaAnswer')}}
          </div>
        </a>
      </div>
    </div>

    <div class="article-bottom">
      <div class="NumberOfReplies">
        <strong>{{$t('workDisplay.replay.answerTotal')}}：</strong>
        <strong>{{replyTotal}}</strong>
      </div>
      <el-table
        v-if="noResponse"
        v-loading="loading"
        style="
        width: 1100px;
        height: 200px;
        margin-bottom: 10px;
        margin-top: 10px;
        z-index: 1">
      </el-table>
      <div style="width: 1100px">
        <el-empty v-if="isEmpty" :image-size="150"></el-empty>
      </div>
      <div v-if="!isEmpty" v-for="(item,index) in replyList" class="comment-box" :key = "index">
        <div class="comment-top">
          <div class="comment-author">
            <router-link target="_blank" :to="{path:'/userHomePage',query:{userId:item.userId}}" :title="$t('workDisplay.replay.authorTitle')">
              <div>
                <img :src=item.headPhotoPath alt="" width="25px" style="border-radius: 50%;">
              </div>
              <div>
                {{item.userNickname == "" ? item.userId : item.userNickname}}
              </div>
            </router-link>
          </div>
          <div class="comment-time" :title="$t('workDisplay.replay.timeTitle')">
            <span>{{item.date | formatDate}}</span>
          </div>
        </div>
        <div class="comment-content">
          <v-md-editor
            :value="item.markdown"
            mode="preview"
          ></v-md-editor>
        </div>
        <div class="comment-control">
          <div class="comment-collection">
            <a href="javascript:;">
              <i :title="$t('workDisplay.replay.cancelCollect')" v-if="whetherCollected.includes(item.workReplyId)" @click="onclickCancelCollection(item.workReplyId)" style="color: rgb(255, 132, 0)"  class="iconfont icon-shoucang2"></i>
              <i :title="$t('workDisplay.replay.collect')" v-else class="iconfont icon-shoucang2" @click="onclickCollection(item.workReplyId)"></i>
            </a>
            <span>{{item.collectedCount}}</span>
          </div>
          <div class="comment-like" :title="$t('workDisplay.replay.giveALike')">
            <!-- 是 @click，不是 @click.once 表示可以多次点赞 -->
            <a href="javascript:;" @click="onclickCommentQuality(item.workReplyId,item.quality+1)">
              <!-- arr.includes(?) 判断某个元素是否存在于 arr;  存在表示被点赞过，然后点亮图标 -->
              <i v-if="whetherQualitied.includes(item.workReplyId)" style="color: rgb(255, 132, 0)"  class="iconfont icon-dianzan"></i>
              <i v-else  class="iconfont icon-dianzan"></i>
            </a>
            <span>{{item.quality}}</span>
          </div>
          <div @click="onclickReport(item.workReplyId)" class="comment-report" id="commentReport">
            <a href="javascript:;">
              <i :title="$t('workDisplay.replay.reported')" v-if="whetherReported.includes(item.workReplyId)" style="color: rgb(240, 0, 0)" class="iconfont icon-jubao1"></i>
              <i :title="$t('workDisplay.replay.report')" v-else class="iconfont icon-jubao1"></i>
            </a>
          </div>
          <div v-if="loginId == item.userId" class="comment-delete" :title="$t('workDisplay.replay.delete')" @click="onclickCommentDelete(item.workReplyId)">
            <a href="javascript:;">
              <i class="iconfont icon-shanchu"></i>
            </a>
          </div>
          <div v-if="loginId == item.userId" class="comment-edit" :title="$t('workDisplay.replay.edit')" @click="onclickReplayTip(item.markdown,item.workReplyId)">
            <a href="javascript:;">
              <i class="iconfont icon-bianji1"></i>
            </a>
          </div>
        </div>
      </div>
      <el-pagination
        v-if="!isEmpty && !noResponse && pageTotal>=10"
        background
        layout="prev, pager, next"
        :total=pageTotal
        @current-change="handleCurrentChange(currentPage)"
        :current-page.sync = currentPage
        class="page">
      </el-pagination>
    </div>
    <div class="report-box" id="reportBox1">
      <div class="report-box-box">
        <strong style="color: rgb(65, 65, 65); font-size: 17px;">{{$t('workDisplay.report.reportType')}}:</strong>
        <form action="javascript:;" method="post" class="report-form">
          <input type="radio" id="11" value="低俗" class="check" v-model="reportedClassify"><label for="11">{{$t('workDisplay.report.type01')}} </label>
          <input type="radio" id="21" value="色情" class="check" v-model="reportedClassify"><label for="21">{{$t('workDisplay.report.type02')}} </label>
          <input type="radio" id="31" value="恶心" class="check" v-model="reportedClassify"><label for="31">{{$t('workDisplay.report.type03')}} </label>
          <input type="radio" id="41" value="违法违纪" class="check" v-model="reportedClassify"><label for="41">{{$t('workDisplay.report.type04')}} </label>
          <input type="radio" id="51" value="答非所问" class="check" v-model="reportedClassify"><label for="51">{{$t('workDisplay.report.type05')}} </label>
          <input type="radio" id="61" value="人身攻击" class="check" v-model="reportedClassify"><label for="61">{{$t('workDisplay.report.type06')}} </label>
          <input type="radio" id="71" value="其他问题" class="check" v-model="reportedClassify"><label for="71">{{$t('workDisplay.report.type07')}}</label>
          <input type="submit" :value="$t('workDisplay.report.submit')" class="reportSubmit" @click="onclickReportSubmit()">
          <input type="reset" :value="$t('workDisplay.report.reset')" class="report-return"@click="onclickReportReturn">
        </form>
      </div>
    </div>
  </div>
</template>

<script>
    const text = `::: tip
    你可以点击 toolbar 中的 tip 来快速插入
    :::

    ::: warning
    这是一段警告
    :::

    ::: danger
    这是一个危险警告
    :::

    ::: details
    这是一个详情块，在 IE / Edge 中不生效
    :::

    ::: tip 自定义标题
    你也可以自定义块中的标题
    :::

    ::: danger STOP
    危险区域，禁止通行
    :::
    `;
    var countsReplay = 0
    export default {
        name: "ArticleReplay",
        props:["loginId"],
        data() {
            return {
                // loginId:'',
                replyPojo:{
                    repliedId:this.$route.query.workId,     // 被回复的ID
                    text: '',
                    replyId:'null',
                },
                baseURL3:'http://localhost:8081/worksDisplay/publishReply/',
                baseURL4:'http://localhost:8081/publishPage/putMdFileOfPicture',  // 上传图片
                baseURL5:'http://localhost:8081/worksDisplay/updateReply/',

                loading:"true",
                isEmpty:false,
                noResponse: true,
                replyTotal:0,     // 总的回复数
                pageTotal:0,       // 总的页数
                currentPage:1,     // 当前页
                baseURL:'http://localhost:8081/worksDisplay/getReplyInfo/',
                baseURL2:'http://localhost:8081/worksDisplay/getPagesAndTotal/',
                baseURL6:'http://localhost:8081/worksDisplay/delete/',
                baseURL7:'http://localhost:8081/worksDisplay/quality/',
                baseURL8:'http://localhost:8081/worksDisplay/collection/',
                baseURL9:'http://localhost:8081/worksDisplay/cancelCollection/',
                baseURL10:'http://localhost:8081/worksDisplay/getUserCollectedId',
                replyList:'',
                // 存放被点赞过的回复的ID，因为是异步请求，所以刷新回复列表也不会影响 whetherQualitied 中的值，但是页面刷新会影响
                whetherQualitied:[],
                whetherCollected:[],
                whetherReported:[],   // 对应中举报（false表示未举报）
                baseURL12:'http://localhost:8081/worksDisplay/userReportReplyList',

                reportedClassify:'',
                reportedId:'', // 被举报ID
                baseURL11:'http://localhost:8081/worksDisplay/report/',

            };
        },
        mounted(){
            this.getReplyInfo()
            this.getAllPageAndTotalCounts()
            this.getUserCollectedId()  // 判断回复是否被已被收藏
            this.getWhetherReport()  // 判断回复是否被已被举报
        },
        methods:{
            handleUploadImage(event, insertImage, files) {
                //拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
                let forms = new FormData()
                let configs = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                forms.append('file', files[0])
                this.axios.post(this.baseURL4, forms, configs).then(res=>{
                    if (res.data==false){
                        this.failOpt(this.$t('workDisplay.replay.imageAddFail'))
                    }else {
                        // 向编辑框中插入对应的内容
                        insertImage({
                            url: res.data,
                            desc: this.$t('workDisplay.replay.addDesc'),
                        });
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            onclickReplayTip: function(editContent,replyId){
                this.replyPojo.replyId = replyId   // 点击编辑评论的时候，当前评论的ID
                let target = document.getElementById("target").offsetTop
                if(countsReplay%2 == 0){
                    document.getElementById("replayTip").innerHTML = this.$t('workDisplay.replay.packUp')
                    document.getElementById("replayContentBox").style.height = "390px"
                    countsReplay++
                    window.scrollTo({
                        top:target,
                        behavior: "smooth"
                    });
                    // 把参数赋值为text
                    this.replyPojo.text = editContent
                }else{
                    this.$confirm(this.$t('workDisplay.replay.confirm.info'), {
                        confirmButtonText: this.$t('workDisplay.replay.confirm.confirm'),
                        cancelButtonText: this.$t('workDisplay.replay.confirm.cancel'),
                        showClose: false,
                        type: 'warning'
                    }).then(() => {
                        document.getElementById("replayTip").innerHTML = this.$t('workDisplay.replay.confirm.answer')
                        document.getElementById("replayContentBox").style.height = "0px"
                        countsReplay++
                        window.scrollTo({
                            top:target,
                            behavior: "smooth"
                        });
                        this.replyPojo.replyId = 'null'
                    }).catch(() => {
                        console.log(this.$t('workDisplay.replay.confirm.cancelTip'))
                    });
                }
            },
            publishReply(){
                if (this.replyPojo.text.length < 50) {
                    this.$message.warning(this.$t('workDisplay.replay.warningInfo'))
                    return
                }
                this.$confirm(this.$t('workDisplay.replay.confirm2.info'), {
                    confirmButtonText: this.$t('workDisplay.replay.confirm2.confirm'),
                    cancelButtonText: this.$t('workDisplay.replay.confirm2.cancel'),
                    showClose: false,
                    type: 'warning'
                }).then(() => {
                    let configs = {
                        headers:{ 'Content-Type':'application/json'}  // 设置说明上传JSON
                    };
                    if (this.replyPojo.replyId == 'null') {
                        this.axios.post(this.baseURL3, this.replyPojo, configs).then(res=>{
                            if (res.data == true){
                                this.successOpt(this.$t('workDisplay.replay.confirm2.successTip'))
                                // 重新加载 回复信息 和 页数、回复数
                                this.getReplyInfo(this.currentPage)
                                this.getAllPageAndTotalCounts()

                                // 收起编辑框
                                document.getElementById("replayTip").innerHTML = this.$t('workDisplay.replay.confirm2.successTip')
                                document.getElementById("replayContentBox").style.height = "0px"
                                countsReplay++
                                window.scrollTo({
                                    top:target,
                                    behavior: "smooth"
                                });
                                this.replyPojo.replyId = 'null'
                            } else {
                                this.failOpt(this.$t('workDisplay.replay.confirm2.failTip'))
                            }
                        }).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                    } else {
                        this.axios.post(this.baseURL5, this.replyPojo, configs).then(res=>{
                            if (res.data == true){
                                this.successOpt(this.$t('workDisplay.replay.updateSuccess'))
                                // 重新加载回复
                                this.getReplyInfo(this.currentPage)
                                // 收起编辑框
                                document.getElementById("replayTip").innerHTML = this.$t('workDisplay.replay.answer')
                                document.getElementById("replayContentBox").style.height = "0px"
                                countsReplay++
                                window.scrollTo({
                                    top:target,
                                    behavior: "smooth"
                                });
                                this.replyPojo.replyId = 'null'
                            } else {
                                this.failOpt(this.$t('workDisplay.replay.updateFail'))
                            }
                        }).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                    }
                }).catch(() => {
                    console.log(this.$t('workDisplay.replay.cancelTip'))
                });
            },

            getReplyInfo(){
                this.axios.post(this.baseURL+this.$route.query.workId+"/"+this.currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data == false) {
                        this.isEmpty = true;
                        console.log(this.$t('workDisplay.replay.serviceUnusual'))
                    }else if(res.data == "empty"){
                        this.isEmpty = true;
                    } else {
                        this.replyList = res.data
                        this.isEmpty = false;
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getAllPageAndTotalCounts(){
                this.axios.post(this.baseURL2+this.$route.query.workId).then(res=>{
                    this.pageTotal = (res.data.pageTotal) * 10
                    this.replyTotal = res.data.replyTotal
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onclickCommentDelete(replyId){
                this.$confirm(this.$t('workDisplay.replay.confirm3.info'), {
                    confirmButtonText: this.$t('workDisplay.replay.confirm3.confirm'),
                    cancelButtonText: this.$t('workDisplay.replay.confirm3.cancel'),
                    showClose: false,
                    type: 'warning'
                }).then(() => {
                    this.axios.post(this.baseURL6+replyId+"/"+this.replyPojo.repliedId).then(res=>{
                        if (res.data ==true){
                            this.successOpt(this.$t('workDisplay.replay.confirm3.successTip'))
                            // 重新加载 回复信息 和 页数、回复数
                            this.getReplyInfo(this.currentPage)
                            this.getAllPageAndTotalCounts()
                        } else {
                            this.failOpt(this.$t('workDisplay.replay.confirm3.faiTip'))
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }).catch(() => {
                    console.log(this.$t('workDisplay.replay.confirm3.cancelTip'))
                });
            },
            onclickCommentQuality(relyId,quality){
                this.axios.post(this.baseURL7+relyId+"/"+this.replyPojo.repliedId+"/"+quality).then(res=>{
                    if (res.data == true){
                        this.$message.success(this.$t('workDisplay.replay.trueToForce'))
                        // 判断 whetherQualitied 中是否存在 relyId ，存在表示点赞过，不存在表示没有点赞过
                        if (!this.whetherQualitied.includes(relyId)){
                            // unshift：头部添加; 添加之后表示点赞过
                            this.whetherQualitied.unshift(relyId)
                        }
                        // 重新加载本页回复的信息
                        this.getReplyInfo(this.currentPage)
                    } else {
                        this.$message.error(this.$t('workDisplay.replay.likeFail'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onclickCollection(replyId){
                this.axios.post(this.baseURL8 + replyId +"/"+ this.$route.query.workId).then(res=>{
                    if (res.data == true) {
                        this.successOpt(this.$t('workDisplay.replay.collectionSuccess'))
                        this.getUserCollectedId()
                        this.getReplyInfo(this.currentPage)
                    } else {
                        this.failOpt(this.$t('workDisplay.replay.collectionFail'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onclickCancelCollection(replyId){
                this.axios.post(this.baseURL9+replyId).then(res=>{
                    if (res.data == true) {
                        this.successOpt(this.$t('workDisplay.replay.cancelCollectionSuccess'))
                        this.getReplyInfo(this.currentPage)
                        this.getUserCollectedId()
                    } else {
                        this.failOpt(this.$t('workDisplay.replay.cancelCollectionFail'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getUserCollectedId(){
                this.axios.post(this.baseURL10).then(res=>{
                    this.whetherCollected = res.data
                })
            },
            handleCurrentChange(currentPage){
                this.axios.post(this.baseURL+this.$route.query.workId+"/"+currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data == false) {
                        this.$message.error(this.$t('workDisplay.replay.serviceUnusual'))
                        this.isEmpty = true;
                    }else if(res.data == "empty"){
                        this.isEmpty = true;
                    } else {
                        this.replyList = res.data
                        this.getWhetherReport()   // 获取当前显示页中的回复是否已被举报
                        let target = document.getElementById("target").offsetTop
                        window.scrollTo({
                            top:target,
                            behavior: "smooth"
                        });
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getWhetherReport(){
                this.axios.post(this.baseURL12).then(res=>{
                    this.whetherReported = res.data
                })
            },
            onclickReport(id){
                if (!this.whetherReported.includes(id)){
                    this.reportedId = id   // 在 onclickReportSubmit() 中被使用
                    document.getElementById("reportBox1").style.height = "150px"
                } else {
                    this.$message.warning(this.$t('workDisplay.replay.reportIllegal'))
                }
            },
            onclickReportReturn(){
                document.getElementById("reportBox1").style.height = "0px"
            },
            onclickReportSubmit(){
                if (this.reportedClassify.length>0){
                    document.getElementById("reportBox1").style.height = "0px"
                    this.axios.post(this.baseURL11+this.reportedId+"/"+this.reportedClassify).then(res=>{
                        if (res.data == false) {
                            this.failOpt(this.$t('workDisplay.replay.reportSuccess'))
                        } else {
                            this.successOpt(this.$t('workDisplay.replay.reportFail'))
                            this.getWhetherReport()
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }else {
                    this.$message.warning(this.$t('workDisplay.replay.reportInfo'))
                }
            },

            successOpt(message) {
                this.$notify({
                    title: this.$t('notify.success'),
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: this.$t('notify.error'),
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .replay-content-box{
    width: 100%;
    height: 0px;
    background-color: rgba(255, 255, 255, 0);
    margin-top: 20px;
    transition: 0.8s;
    overflow: hidden;
  }
  .replay-box{
    width: 1100px;
    min-height: 30px;
    border-radius: 3px;
    margin: 0px auto;
  }
  .mdEditBox{
    width: 1100px;
    margin: 0 auto;
  }
  .publish-tip{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 3px;
    color: rgb(241, 241, 241);
    /*background-color: rgb(42, 159, 0);*/
    background-color: #a3c2a7;
    margin-top: 10px;
  }
  .publish-tip:hover{
    color: rgb(255, 255, 255);
    /*background-color: rgb(43, 184, 0);*/
    background-color: #77ae80;
  }
  .replay-tip{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 3px;
    color: rgb(241, 241, 241);
    /*background-color: rgb(216, 140, 0);*/
    background-color: rgb(216, 175, 46);
  }
  .replay-tip:hover{
    color: rgb(255, 255, 255);
    /*background-color: rgb(238, 155, 0);*/
    background-color: rgb(216, 157, 33);
  }

  .abcd{
    min-height: 600px;
  }
  .article-bottom{
    width: 1100px;
    margin: 10px auto;
  }
  .NumberOfReplies{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 17px;
  }
  .NumberOfReplies strong:nth-child(1){
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  }
  .NumberOfReplies strong:nth-child(2){
    font-family: "Lucida Console", "Courier New", monospace;
  }
  .comment-box{
    width: 100%;
    margin:20px auto;
    margin-top: 5px;
    background-color: white;
    border: 1px solid rgb(230, 230, 230);
    border-radius: 3px;
    transition: 0.2s;
    letter-spacing: 1px;
  }
  .comment-box:hover{
    box-shadow: 0 0 10px rgb(202, 202, 202);
  }
  .comment-top{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #e3e3e3;
  }
  .comment-top div{
    float: left;
  }
  .comment-author{
    width: 49%;
    height: 40px;
    margin-left: 1%;
    line-height: 40px;
    font-size: 14px;
  }
  .comment-author div:nth-child(1){
    margin-top: 8px;
    margin-right: 5px;
  }
  .comment-author div:nth-child(2){
    width: 50%;
    color: rgb(96, 96, 96);
    /* 文字溢出处理 */
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .comment-author div:nth-child(2):hover{
    color: rgb(0, 0, 0);
  }
  .comment-time{
    width: 49%;
    height: 40px;
    line-height: 40px;
    text-align: right;
    font-size:12px;
    color: rgb(144, 144, 144);
  }
  .comment-time i{
    font-size: 16px;
    color: rgb(150, 150, 150);
  }
  .comment-content{
    width: 100%;
  }
  .comment-control{
    width: 100%;
    height: 50px;
    margin: 0 auto;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: rgb(243, 243, 243);
  }
  .comment-control div{
    float: right;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: rgb(108, 108, 108);
    margin-top: 10px;
    margin-left: 20px;
  }
  .comment-edit i{
    font-size: 16px;
    color: rgb(108, 108, 108);
  }
  .comment-edit i:hover {
    color: rgb(46, 213, 0);
  }
  .comment-delete i{
    font-size: 16px;
    color: rgb(125, 125, 125);
  }
  .comment-delete i:hover {
    color: rgb(253, 0, 0);
  }
  .comment-report i{
    font-size: 16px;
    color: rgb(125, 125, 125);
  }
  .comment-report i:hover {
    color: rgb(253, 0, 0);
  }
  .comment-like i{
    font-size: 20px;
    color: rgb(126, 126, 126);
  }
  .comment-like i:hover{
    color: tomato;
  }
  .comment-collection{
    margin-right: 1%;
  }
  .comment-collection i{
    font-size: 20px;
    color: rgb(125, 125, 125);
  }
  .comment-collection i:hover{
    color: rgb(251, 126, 9);
  }
  .page{
    margin: 20px auto;
    margin-left: -10px;
  }

  .report-box{
    width: 100%;
    height: 0px;
    position: fixed;
    bottom: 0px;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 0 15px rgb(182, 182, 182);
    transition: 0.3s;
    z-index: 99;
  }
  .report-box-box{
    width: 1100px;
    height: 120px;
    margin: 30px auto;
    letter-spacing: 2px;
  }
  .report-form{
    width: 100%;
    height: 50px;
    padding-top: 20px;
    font-size: 15px;
    position: relative;
  }
  .report-form .check{
    margin-left: 10px;
    margin-right: 5px;
    width: 16px;
    height: 16px;
  }
  .reportSubmit{
    width: 70px;
    height: 25px;
    line-height: 22px;
    color: rgb(133, 133, 133);
    border: 1px solid rgb(226, 226, 226);
    background-color: white;
    border-radius: 3px;
    font-size: 13px;
    margin-left: 70px;
    transition: 0.2s;
    position: absolute;
    right: 100px;
  }
  .reportSubmit:hover{
    color: rgb(247, 247, 247);
    background-color: rgb(73, 73, 73);
    border: 1px solid rgb(226, 226, 226);
  }
  .reportSubmit:active{
    background-color: rgb(0, 0, 0);
  }
  .report-return{
    width: 70px;
    height: 25px;
    line-height: 22px;
    text-align: center;
    color: rgb(143, 143, 143);
    background-color: #ffffff;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 3px;
    font-size: 13px;
    margin-left: 20px;
    transition: 0.2s;
    position: absolute;
    right: 0px;

  }
  .report-return:hover{
    color: rgb(247, 247, 247);
    background-color: rgb(73, 73, 73);
    border: 1px solid rgb(226, 226, 226);
  }
  .report-return:active{
    background-color: rgb(0, 0, 0);
  }
</style>
